<template>


  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :lock-scroll="tableConfig.lockScroll"
    :append-to-body="tableConfig.appendToBody"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.close"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-form size="small" ref="formOpsEnvAccountRef" :rules="checkRule" :model="submitData" label-width="180px">


        <el-form-item label="名称" prop="name">
            <el-input v-model="submitData.name" />
        </el-form-item>
        <el-form-item label="账号类型" prop="type">
          <el-select v-model="submitData.type" placeholder="请选择">
            <el-option
              v-for="item in typeArray"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重要性" prop="userPeculiar">
          <el-select v-model="submitData.userPeculiar" placeholder="请选择" clearable  >
            <el-option key="0" label="特权" :value="0"/>
            <el-option key="1" label="管理员" :value="1"/>
            <el-option key="2" label="一般" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定类型" prop="bindType">
          <el-select v-model="submitData.bindType" placeholder="请选择" clearable >
            <el-option key="0" label="环境" :value="0"/>
            <el-option key="1" label="场所" :value="1"/>
            <el-option key="2" label="组件" :value="2"/>
            <el-option key="3" label="工具" :value="3"/>
            <el-option key="4" label="应用" :value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定" prop="bindId">
          <el-select v-model="submitData.bindId" placeholder="请选择">
            <el-option
              v-for="item in bindIdArray"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="userName">
            <el-input v-model="submitData.userName" />
        </el-form-item>
        <el-form-item label="密码1" prop="userPassword1">
            <el-input v-model="submitData.userPassword1" />
        </el-form-item>
        <el-form-item label="密码2" prop="userPassword2">
            <el-input v-model="submitData.userPassword2" />
        </el-form-item>
        <el-form-item label="密码3" prop="userPassword3">
            <el-input v-model="submitData.userPassword3" />
        </el-form-item>
        <el-form-item label="网址" prop="webUrl1">
          <el-input placeholder="请输入内容" v-model="submitData.webUrl1">
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="网址" prop="webUrl2">
          <el-input placeholder="请输入内容" v-model="submitData.webUrl2">
            <template slot="prepend">Http://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="详情" prop="briefIntroduction">
            <el-input v-model="submitData.briefIntroduction" type="textarea" :autosize="{minRows: 3}"  />
        </el-form-item>



    </el-form>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd"
                 v-if="defaultValue.saveUpdSelect !== 'select'">{{ defaultValue.title }}
                 </el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

import http from '@/utils/http'
import {clearInvalid} from "@/utils/utils"

export default {
  name: "OpsEnvAccountSaveUpd",
  data() {
    return {
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        lockScroll: false,
        appendToBody: true,
      },
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '查看',
        // 保存还是修改or查看,取值有 select | save | upd
        saveUpdSelect: 'select'
      },
      // 提交的数据
      submitData:{
        id: null,
        siteId: null,
        name: null,
        type: null,
        userPeculiar: null,
        bindId: null,
        bindType: null,
        userName: null,
        userPassword1: null,
        userPassword2: null,
        userPassword3: null,
        webUrl1: null,
        webUrl2: null,
        briefIntroduction: null,
      },
      // 校验规则
      checkRule: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        type: [{required: true, message: '请选择账号类型', trigger: 'change'}],
        userPeculiar: [{required: true, message: '请选择重要性', trigger: 'change'}],
        bindId: [{required: true, message: '请选择绑定', trigger: 'change'}],
        bindType: [{required: true, message: '请选择绑定类型', trigger: 'change'}],
        userName: [{required: true, message: '请输入账号', trigger: 'blur'}],
      },
      // 账号类型
      typeArray: [],
      // 绑定类型
      bindIdArray: [],
    }
  },
  methods: {
    /**
     * 初始化操作
     * @param operateType 操作类型,保存还是修改or查看,取值有 select \ save \ upd
     * @param obj 如果是修改和查看，则是详细数据,需要赋值
     */
    init(operateType, obj){
      this.defaultValue.saveUpdSelect = operateType
      this.getDictListPage()
      this.clearOldData()

      if (operateType === 'save'){
        this.defaultValue.title = '新增'
        this.submitData.userPeculiar = 2
        this.submitData.bindType = 1

      } else if (operateType === 'upd'){
        this.defaultValue.title = '修改'
        // 要json处理下，否则会影响之前的值
        this.submitData = JSON.parse(JSON.stringify(obj))
        this.submitData.bindId = obj.bindId

      } else {
        // 可能查看
      }

      this.tableConfig.show = true
    },
    /**
     * 分页查询字典
     */
    getDictListPage(){
      http.post("/opsSysDict/getListPage", {
        // 分页参数
        current: 1,
        size: 999,
        sysDictGroupId: "1964968442436055040",
      }).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 处理数据
        this.typeArray = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分支分页查询列表-组件
     */
    getListPage() {
      if (!this.computerServerId){
        return
      }
      this.queryParam.current = this.pageConfig.current
      this.queryParam.size = this.pageConfig.size
      this.queryParam.computerServerId = this.computerServerId
      http.post("/opsApp/getComponentByComputerId", this.queryParam).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        this.pageConfig.total = data.total;
        this.pageConfig.current = data.current;
        this.pageConfig.size = data.size;
        // 表格数据
        this.tableData = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 分页查询列表-现场
     */
    getOpsSitePageList() {
      let query = {
        current: 1,
        size: 1,
        id: this.$route.query.siteId
      }
      http.post("/opsSite/getSitePageList", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        this.bindIdArray = data.records

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 分页查询列表-环境
     */
    getEnvListPage() {
      let query = {
        current: 1,
        size: 999,
        siteId: this.$route.query.siteId
      }
      http.post("/opsEnv/getListPage", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        this.bindIdArray = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 清理掉旧数据
     */
    clearOldData(){
      this.submitData = {
        id: null,
        siteId: null,
        name: null,
        type: null,
        userPeculiar: null,
        bindId: null,
        bindType: null,
        userName: null,
        userPassword1: null,
        userPassword2: null,
        userPassword3: null,
        webUrl1: null,
        webUrl2: null,
        briefIntroduction: null,
      }
    },
    /**
     * 是保存还是修改
     */
    toSaveUpd(){
      if (this.defaultValue.saveUpdSelect === 'save'){
        this.saveOpsEnvAccount()

      } else if (this.defaultValue.saveUpdSelect === 'upd'){
        this.updOpsEnvAccount()

      } else {

      }
    },
    /**
     * 保存
     */
    saveOpsEnvAccount(){
      this.submitData.siteId = this.$route.query.siteId
      http.post("/opsEnvAccount/saveOpsEnvAccount", this.submitData).then(response => {
        let res = response.data;

        this.$message.success ("保存成功");
        this.$emit('getListPage', null)
        // 关闭弹出框,继续添加
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 更新
     */
    updOpsEnvAccount(){
      clearInvalid(this.submitData)
      http.post("/opsEnvAccount/updOpsEnvAccount", this.submitData).then(response => {
        let res = response.data;

        this.$message.success ("更新成功");
        this.$emit('getListPage', null)
        // 关闭弹出框
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 获取环境信息
     * @param bindType 绑定类型
     */
    getEnvAccount(bindType){
      this.submitData.bindId = null
      // 根据消息总数显示是否带提示框
      if (bindType === 0){
        // 环境
        this.getEnvListPage()

      } else if (bindType === 1){
        // 场所
        this.getOpsSitePageList()
        // let obj = { id: this.$route.query.siteId, name: '当前现场' };
        // this.bindIdArray.push(obj);

      } else if (bindType === 2){
        // 组件
        http.post("/opsEnvAccount/getEnvAccount", {
          siteId: this.$route.query.siteId,
          type: 2
        }).then(response => {
          let res = response.data;
          // 表格数据
          this.bindIdArray = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })

      } else if (this.submitData.bindType === 3){
        // 工具
        http.post("/opsEnvAccount/getEnvAccount", {
          siteId: this.$route.query.siteId,
          type: 3
        }).then(response => {
          let res = response.data;
          // 表格数据
          this.bindIdArray = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })

      } else if (bindType === 4){
        // 应用
        http.post("/opsEnvAccount/getEnvAccount", {
          siteId: this.$route.query.siteId,
          type: 1
        }).then(response => {
          let res = response.data;
          // 表格数据
          this.bindIdArray = res.data;

        }).catch(error => {
          this.$message.error(error.message);
        })

      } else {
        this.bindIdArray = []
      }
    },
  },
  watch: {
    // 绑定类型发生变化触发
    'submitData.bindType'() {
      // this.submitData.bindId = null
      this.getEnvAccount(this.submitData.bindType)
    }
  },
}
</script>

<style scoped>

</style>


